<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    
    <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
    
    <script src="js/cart.js"></script>
    
	<link href="apple-touch-icon.png" rel="apple-touch-icon">
	<link href="favicon.png" rel="icon">
	<link
		href="https://fonts.googleapis.com/css?family=Archivo+Narrow:300,400,700%7CMontserrat:300,400,500,600,700,800,900"
		rel="stylesheet">
	<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="plugins/ps-icon/style.css">
	<!-- CSS Library-->
	<link rel="stylesheet" href="plugins/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="plugins/owl-carousel/assets/owl.carousel.css">
	<link rel="stylesheet" href="plugins/jquery-bar-rating/dist/themes/fontawesome-stars.css">
	<link rel="stylesheet" href="plugins/slick/slick/slick.css">
	<link rel="stylesheet" href="plugins/bootstrap-select/dist/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="plugins/Magnific-Popup/dist/magnific-popup.css">
	<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
	<link rel="stylesheet" href="plugins/revolution/css/settings.css">
	<link rel="stylesheet" href="plugins/revolution/css/layers.css">
	<link rel="stylesheet" href="plugins/revolution/css/navigation.css">
	<!-- Custom-->
	<link rel="stylesheet" href="css/style.css">
	<!--HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
	<!--WARNING: Respond.js doesn't work if you view the page via file://-->
	<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
	<link rel="stylesheet" href="css/index.css">
	
	    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="assets/css/style.css">
	
	<title>购物车</title>
</head>
<body>
    <!-- Start Header Area -->
    	<header class="header">
		<nav class="navigation">
			<div class="container-fluid">
				<div class="navigation__column left">
					<div class="header__logo"><a class="ps-logo" href="index.html"><img src="images/logo.png"
								alt=""></a></div>
				</div>
				<div class="navigation__column center">
					<ul class="main-menu menu">
						<li class="menu-item menu-item-has-children dropdown"><a href="index.html">登录</a>
							
						</li>						
					</ul>
				</div>
				<div class="navigation__column right">
					<form class="ps-search--header" action="do_action" method="post">
						<input class="form-control" type="text" placeholder="Search Product…">
						<button><i class="ps-icon-search"></i></button>
					</form>
					<div class="ps-cart"><a class="ps-cart__toggle" href="#"><span><i>20</i></span><i
								class="ps-icon-shopping-cart"></i></a>
						<div class="ps-cart__listing">
							<div class="ps-cart__content">
								<div class="ps-cart-item"><a class="ps-cart-item__close" href="#"></a>
									<div class="ps-cart-item__thumbnail"><a href="product-detail.html"></a><img
											src="images/cart-preview/1.jpg" alt=""></div>
									<div class="ps-cart-item__content"><a class="ps-cart-item__title"
											href="product-detail.html">Amazin’ Glazin’</a>
										<p><span>Quantity:<i>12</i></span><span>Total:<i>£176</i></span></p>
									</div>
								</div>
								<div class="ps-cart-item"><a class="ps-cart-item__close" href="#"></a>
									<div class="ps-cart-item__thumbnail"><a href="product-detail.html"></a><img
											src="images/cart-preview/2.jpg" alt=""></div>
									<div class="ps-cart-item__content"><a class="ps-cart-item__title"
											href="product-detail.html">The Crusty Croissant</a>
										<p><span>Quantity:<i>12</i></span><span>Total:<i>£176</i></span></p>
									</div>
								</div>
								<div class="ps-cart-item"><a class="ps-cart-item__close" href="#"></a>
									<div class="ps-cart-item__thumbnail"><a href="product-detail.html"></a><img
											src="images/cart-preview/3.jpg" alt=""></div>
									<div class="ps-cart-item__content"><a class="ps-cart-item__title"
											href="product-detail.html">The Rolling Pin</a>
										<p><span>Quantity:<i>12</i></span><span>Total:<i>£176</i></span></p>
									</div>
								</div>
							</div>
							<div class="ps-cart__total">
								<p>Number of items:<span>36</span></p>
								<p>Item Total:<span>£528.00</span></p>
							</div>
							<div class="ps-cart__footer"><a class="ps-btn" href="cart.html">Check out<i
										class="ps-icon-arrow-left"></i></a></div>
						</div>
					</div>
					<div class="menu-toggle"><span></span></div>
				</div>
			</div>
		</nav>
	</header>
	<div class="header-services">
		<div class="ps-services owl-slider" data-owl-auto="true" data-owl-loop="true" data-owl-speed="7000"
			data-owl-gap="0" data-owl-nav="true" data-owl-dots="false" data-owl-item="1" data-owl-item-xs="1"
			data-owl-item-sm="1" data-owl-item-md="1" data-owl-item-lg="1" data-owl-duration="1000"
			data-owl-mousedrag="on">
			<p class="ps-service"><i class="ps-icon-delivery"></i><strong>专注运动</strong>: 运动用品，我们最专业</p>
			<p class="ps-service"><i class="ps-icon-delivery"></i><strong>质量保障</strong>: 层层把关，保证每一件商品质量达标</p>
			<p class="ps-service"><i class="ps-icon-delivery"></i><strong>急速物流</strong>: 争分夺秒，只为您的更快体验</p>
		</div>
	</div>
    <!-- end Header Area -->


    <!-- offcanvas search form start -->
    <div class="offcanvas-search-wrapper">
        <div class="offcanvas-search-inner">
            <div class="offcanvas-close">
                <i class="fa fa-close"></i>
            </div>
            <div class="container">
                <div class="offcanvas-search-box">
                    <form class="d-flex bdr-bottom w-100">
                        <input type="text" placeholder="Search entire storage here...">
                        <button class="search-btn"><i class="fa fa-search"></i>search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- offcanvas search form end -->

    <main>
        <!-- breadcrumb area start -->
        <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="assets/img/banner/shop.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrap">
                            <nav aria-label="breadcrumb">
                                <h3 class="breadcrumb-title">SHOP</h3>
                                <ul class="breadcrumb justify-content-center">
                                    <li class="breadcrumb-item"><a href="index.jsp"><i class="fa fa-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="index.jsp.">Shop</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Cart</li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb area end -->

        <!-- cart main wrapper start -->
        <div class="cart-main-wrapper section-padding">
            <div class="container">
                <div class="section-bg-color">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Cart Table Area -->
                            <div class="cart-table table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="pro-thumbnail">Thumbnail</th>
                                            <th class="pro-title">Product</th>
                                            <th class="pro-price">Price</th>
                                            <th class="pro-quantity">Quantity</th>
                                            <th class="pro-subtotal">Total</th>
                                            <th class="pro-remove">Remove</th>
                                        </tr>
                                    </thead>
                                    <tbody id="CartContent">
                                        <!-- <tr>
                                            <td class="pro-thumbnail"><a href="#"><img class="img-fluid" src="assets/img/product/product-1.jpg" alt="Product" /></a></td>
                                            <td class="pro-title"><a href="#">PRIMITIVE MENS SHOES</a></td>
                                            <td class="pro-price"><span>$295.00</span></td>
                                            <td class="pro-quantity">
                                                
                                                <div class="pro-qty"><input type="text" value="1"></div>
                                                
                                            </td>
                                            <td class="pro-subtotal"><span>$295.00</span></td>
                                            <td class="pro-remove"><a href="#"><i class="fa fa-trash-o"></i></a></td>
                                        </tr>  -->
                                        
                                        
                                        
                                    </tbody>
                                </table>
                            </div>
                            <!-- Cart Update Option -->
                            <div class="cart-update-option d-block d-md-flex justify-content-between">
                                <div class="apply-coupon-wrapper">
                                    <form action="#" method="post" class=" d-block d-md-flex">
                                        <input type="text" placeholder="Enter Your Coupon Code" required />
                                        <button class="btn btn-sqr" id= "applyCoupon">Apply Coupon</button>
                                    </form>
                                </div>
                                <div class="cart-update">
                                    <a href="cart.jsp" class="btn btn-sqr">Update Cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-5 ml-auto">
                            <!-- Cart Calculation Area -->
                            <div class="cart-calculator-wrapper">
                                <div class="cart-calculate-items">
                                    <h6>Cart Totals</h6>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <tr>
                                                <td>Sub Total</td>
                                                <td id="totalspent"></td>
                                            </tr>
                                            <tr>
                                                <td>Shipping</td>
                                                <td id="shipping">$0</td>
                                            </tr>
                                            <tr class="total">
                                                <td>Total</td>
                                                <td class="total-amount" id="total-amount"></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <a href="checkout.html" class="btn btn-sqr d-block">Proceed Checkout</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- cart main wrapper end -->
    </main>

    <!-- Scroll to top start -->
    <div class="scroll-top not-visible">
        <i class="fa fa-angle-up"></i>
    </div>
    <!-- Scroll to Top End -->


 

    <!-- JS
============================================ -->

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- jQuery JS -->
    <!-- Popper JS -->
    <script src="assets/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <!-- slick Slider JS -->
    <script src="assets/js/plugins/slick.min.js"></script>
    <!-- Countdown JS -->
    <script src="assets/js/plugins/countdown.min.js"></script>
    <!-- Nice Select JS -->
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <!-- jquery UI JS -->
    <script src="assets/js/plugins/jqueryui.min.js"></script>
    <!-- Image zoom JS -->
    <script src="assets/js/plugins/image-zoom.min.js"></script>
    <!-- image loaded js -->
    <script src="assets/js/plugins/imagesloaded.pkgd.min.js"></script>
    <!-- masonry  -->
    <script src="assets/js/plugins/masonry.pkgd.min.js"></script>
    <!-- mailchimp active js -->
    <script src="assets/js/plugins/ajaxchimp.js"></script>
    <!-- contact form dynamic js -->
    <script src="assets/js/plugins/ajax-mail.js"></script>
    <!-- google map api -->
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
    <!-- google map active js -->
    <script src="assets/js/plugins/google-map.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
    <!-- cart JS -->
	
	<!-- JS Library-->
	<script type="text/javascript" src="plugins/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="plugins/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="plugins/jquery-bar-rating/dist/jquery.barrating.min.js"></script>
	<script type="text/javascript" src="plugins/owl-carousel/owl.carousel.min.js"></script>
	<script type="text/javascript" src="plugins/gmap3.min.js"></script>
	<script type="text/javascript" src="plugins/imagesloaded.pkgd.js"></script>
	<script type="text/javascript" src="plugins/isotope.pkgd.min.js"></script>
	<script type="text/javascript" src="plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
	<script type="text/javascript" src="plugins/jquery.matchHeight-min.js"></script>
	<script type="text/javascript" src="plugins/slick/slick/slick.min.js"></script>
	<script type="text/javascript" src="plugins/elevatezoom/jquery.elevatezoom.js"></script>
	<script type="text/javascript" src="plugins/Magnific-Popup/dist/jquery.magnific-popup.min.js"></script>
	<script type="text/javascript" src="plugins/jquery-ui/jquery-ui.min.js"></script>
	<script type="text/javascript"
		src="http://ditu.google.cn/maps/api/js?key=AIzaSyAx39JFH5nhxze1ZydH-Kl8xXM3OK4fvcg&amp;region=GB"></script>
	<script type="text/javascript" src="plugins/revolution/js/jquery.themepunch.tools.min.js"></script>
	<script type="text/javascript" src="plugins/revolution/js/jquery.themepunch.revolution.min.js"></script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.video.min.js"></script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.slideanims.min.js">
	</script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js">
	</script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.navigation.min.js">
	</script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.actions.min.js"></script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
	<script type="text/javascript" src="plugins/revolution/js/extensions/revolution.extension.migration.min.js">
	</script>
	<!-- Custom scripts-->
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>